<style lang="less" scoped>

  section{
    height: 100%;
    padding:0 1.5rem;
    font-size:.8rem;
    &>ul{
      height: 100%;
    }
  }

  .icon{
    font-size: 15px;
  }

  .input-common{
    padding:.2rem;
    border-radius:.2rem;
    border:1px solid #c5bfbf;
    height:1rem;
    align-self:center;
  }

  .dflex{
    display:flex;
  }

  .dn{
    display:none;
  }

  .pr{
    position:relative;
  }

  #project-name{
    width:94%;
    .input-common;
  }

  #path-name{
    width:90%;
    padding:.2rem;
    border-top-left-radius:.2em;
    border-bottom-left-radius:.2em;
    border:1px solid #c5bfbf;
    height:1rem;
    align-self:center;
    border-right-width: 0;
  }

  .group-one{
    height:10%;
    .dflex;
    .project-name{
      width:5rem;
      align-self: center;
    }
  }

  .group-two{
    height:10%;
    .dflex;
    .path-name{
      width:5rem;
      align-self: center;
    }
    button{
      height:1.5rem;
      width:5%;
      align-self: center;
      border: 0;
      background-color: #409cf9;
      color: #fff;
      border-top-right-radius:.2em;
      border-bottom-right-radius:.2em;
    }
  }

  .group-three{
    .dflex;
    height:10%;
    p:first-child{
      flex-grow:2.7;
      align-self: center;
    }
    p:last-child{
      flex-grow:1;
      align-self: center;
    }
  }

  .group-four{
    .dflex;
    height:60%;
  }

  .group-five{
    .dflex;
    height:10%;
    button{
      align-self: center;
      width:5rem;
    }
    .cancle{
      margin-left: 2rem;
    }
  }

  .pageset{
    background-color:white;
    width:60%;
    margin-right:1rem;
    overflow:hidden;
    border-radius: .2rem;
   
    .tree-list{
      overflow:auto;
      height:92%;
    }
    .add-parent{
      height:8%;
      text-align: center;
      background-color:gray;
      position: absolute;
      bottom: 0;
      left:0;
      right:0;
    }
  }

  .layoutset{
    flex-grow:1
  }

  #addParent{
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    background-color: #f6f6f6;
    border:1px solid #e5e5e5;
    border-width: 1px 0;
  }

  .inner{
            width:200px;
            height:100px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: white;
            overflow: hidden;
      .title{
        text-align: left;
        border-bottom: 1px solid #eee;
        padding:10px;
      }
      .body{
        padding:10px;
        border-bottom: 1px solid #eee;
        input{
           border-radius: .2rem;
           border: 1px solid #c5bfbf;
        }
      }
      .foot{
        padding:10px;
        a{
          float: right;
          margin-left: 5px;
          margin-bottom: 0;
          display: inline-block;
          padding: 2px 5px 2px;
          font-size: 13px;
          color: #333;
          text-align: center;
          text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
          vertical-align: middle;
          background-color: #f5f5f5;
          text-decoration: none;
        }
      }
  }

</style>
<template>

<section>
  
  <ul>
    <li  class="group-one">
      <label for="project-name" class="project-name">项目名</label>
      <input type="text" placeholder="项目名" id="project-name"/>
    </li>
    <li class="group-two">
      <!--需要electron配合-->
      <label for="path-name" class="path-name">项目路径</label>
      <input type="text" placeholder="项目路径" id="path-name"/>
      <!--<input type="file" id="file-select" class="dn" @change="fileChange"/>-->
      <button @click="openFile">
        <svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1335"><path d="M742.944 285.696l0 117.6 134.816-204.8L742.944 0l0 111.296c0 0-421.568-48.832-476.224 423.424l28.992 0C466.976 205.856 742.944 285.696 742.944 285.696zM774.368 661.92c-4.352-13.44-22.592-24.288-40.736-24.288L75.264 637.632c-18.144 0-29.312 10.848-24.928 24.288l109.92 337.76c4.384 13.408 22.624 24.288 40.736 24.288l658.368 0c18.112 0 29.248-10.88 24.928-24.288L774.368 661.92zM837.536 427.488l-172.416 0c-37.6-2.304-59.232 58.88-70.336 107.2L295.744 534.688c-7.872 15.04-15.552 30.944-22.912 47.808-4.8 10.912-7.52-35.424-6.144-47.232 0.032-0.224 0.032-0.384 0.032-0.576L197.216 534.688c-18.144 0-32.864 14.656-32.864 32.832l0 37.216 569.28 0c15.616 0.032 29.856 4.384 42.368 11.744 12.224 7.488 23.776 18.112 29.6 35.2l82.848 254.56L888.448 501.408C888.416 501.408 885.152 427.488 837.536 427.488z" p-id="1336"></path></svg>
      </button>
    </li>
    <li class="group-three">
      <p>页面设置</p>
      <p>布局设置</p>
    </li>
    <li class="group-four">
      <div class="pageset pr">
        <div class="tree-list">
          <v-list :pageSet="guide.pageSet"></v-list>
        </div>
        <div class="add-parent" id="addParent">
          <button @click="showShade">添加父节点</button>
        </div>
      </div>
      <div class="layoutset">
        <v-layout></v-layout>
      </div>
    </li>
    <!--与主进程通信-->
    <li class="group-five">
      <button @click="sure">确定</button>
      <button @click="cancle" class="cancle">取消</button>
    </li>
  </ul>
  <!--弹框-->
  <v-shade v-if="guide.isShowShade">
    <div class="inner">
      <div class="title">添加{{ guide.class }}</div>
      <div class="body">
         <input type="text" id="node"/>
      </div>
      <div class="foot">
        <a href="javascript:;"  @click="addNode">确定</a>
        <a href="javascript:;"  @click="cancelNode">取消</a>
      </div>
    </div>
  </v-shade>
</section>
  
</template>

<script>

import vLayout from './Layout'
import vList from './List'
import vShade from './Shade'
import electron from 'electron'

import { mapState } from 'vuex'

export default {
  name: 'guide',
  computed: mapState([
    'guide'
  ]),
  components: {
    vLayout,
    vList,
    vShade
  },
  methods: {
    openFile(){
      //document.getElementById('file-select').click();
      const ipc = require('electron').ipcRenderer;
      ipc.send('open-file-dialog');

      ipc.on('selected-directory', function (event, path) {
        document.getElementById('path-name').value = `${path}`;
      })
    },
    fileChange(e){
      var filepath = e.target.value;
      document.getElementById('path-name').value = filepath;
    },
    showShade(){
      this.$store.dispatch('showShade',{
        state:true,
        class:"父节点"
      });
    },
    // 父节点 + 子节点
    addNode(){
      if(!document.getElementById("node").value) return;
      
      var classOpr = this.$store.state.guide.class;
      if(classOpr === '父节点'){
        this.$store.dispatch('addParent',{
          nodeValue:document.getElementById("node").value
        });
        this.$store.dispatch('showShade',{
          state:false,
          class:"父节点"
        });
      }else{
        this.$store.dispatch('addChild',{
          nodeValue:document.getElementById("node").value
        });
        this.$store.dispatch('showShade',{
          state:false,
          class:"子节点"
        });
      }
      
    },
    cancelNode(){
      document.getElementById("node").value = '';
      this.$store.dispatch('showShade',{
        state:false
      });
    },
    sure(){
      //需要先进行验证
      //拼接输出数据
      var Obj={},layOutId;
      document.getElementsByName("layout").forEach(function(ele,index){
        if(ele.checked){
          layOutId = ele.value;
        }
      })
      Obj.path =  document.getElementById('project-name').value;
      Obj.layOutId =  layOutId;
      Obj.from = 'create';
      Obj.pageSettings = this.$store.state.guide.pageSet;
      console.log(Obj)
    },
    cancle(){
      this.$router.back({name: '／'});
    }
  }
}
</script>

